<template>
  <div class="insuPlan">
    <div class="cellItem">
      <div class="insuName">
        <span v-if="insuData.ismain" class="zhu-icon">主</span>
        <span v-else class="fu-icon" :class="{ disabled: insuData.canChoose }"
          >附</span
        >
        <div class="ftc9">
          {{ insuData.productName }}
          <div class="sb_tips" v-if="insuData.errorTip">
            {{ insuData.errorTip }}
          </div>
        </div>
      </div>
      <div class="checkBox" v-if="!insuData.ismain && !insuData.mustChecked">
        <van-checkbox
          :value="insuData.checked"
          checked-color="#f54040"
          :disabled="insuData.canChoose"
          @click="changeChecked(insuData)"
        ></van-checkbox>
      </div>
    </div>

    <template
      v-if="insuData.checked || insuData.ismain || insuData.mustChecked"
    >
      <!-- 计划选择(常规+大类选择) -->
      <div class="cell3_main" v-if="insuData.plansList">
        <div class="has_warn2_msg">
          <div class="cell3Item">
            <div class="cell3_label">投保计划</div>
            <div class="cell2_value">
              <MsRadios
                :curVal="insuData.planBig"
                :arrList="insuData.planBiggerList"
                type="planBig"
                @change="change1Radio"
                v-if="insuData.planBig"
              />
              <MsRadios
                :curVal="insuData.planCode"
                :arrList="insuData.plansList"
                type="planCode"
                @change="change1Radio"
              />
            </div>
          </div>
          <div class="warn2_msg" v-if="planDescCont">{{ planDescCont }}</div>
        </div>
      </div>
      <van-field
        :input-align="inputAlign"
        label="缴费期间"
        readonly
        v-if="!insuData.hidePayYearList && insuData.payendyear"
      >
        <template #input>
          <MsRadios
            v-if="insuData.payendyearList && insuData.payendyearList.length > 0"
            :curVal="insuData.payendyear"
            :arrList="insuData.payendyearList"
            type="payendyear"
            @change="change1Radio"
          />
          <div class="txt_check thin-border" v-else>
            {{ insuData.payendyear | payendYearName }}
          </div>
        </template>
      </van-field>
      <van-field
        :input-align="inputAlign"
        label="保险期间"
        readonly
        v-if="insuData.insuYear"
      >
        <template #input>
          <MsRadios
            :curVal="insuData.insuYear"
            :arrList="insuData.insureYearList"
            type="insuYear"
            @change="change1Radio"
            v-if="insuData.insureYearList && insuData.insureYearList.length > 0"
          />
          <div class="txt_check thin-border" v-else>
            {{ insuData.insuYear | insureYearName(insuData.insuYearType) }}
          </div>
        </template>
      </van-field>
      <van-field
        :input-align="inputAlign"
        class="cell3_value"
        readonly
        v-if="insuData.multType"
      >
        <template #label>
          <div class="flex_ac">
            投保份数<FieldDescMode
              label="投保份数"
              :desc="insuData.multDesc"
              v-if="insuData.multDesc"
            />
          </div>
        </template>
        <template #input>
          <van-stepper
            v-model="insuData.mult"
            :min="insuData.multMin"
            :max="insuData.multMax"
            integer
            input-width="80px"
            :step="insuData.stepSize || '1'"
            @minus="changDatas(insuData.varietyCode, 'mult', --insuData.mult)"
            @plus="changDatas(insuData.varietyCode, 'mult', ++insuData.mult)"
            @blur="
              changDatas(insuData.varietyCode, 'mult', $event.target.value)
            "
            v-if="insuData.multType === 'stepper'"
          />
          <MsRadios
            :curVal="insuData.mult + ''"
            :arrList="insuData.multList"
            type="mult"
            @change="change1Radio"
            v-else-if="insuData.multType === 'arr'"
          />
          <div class="txt_check thin-border" v-else>{{ insuData.mult }}份</div>
        </template>
      </van-field>
      <van-field
        :input-align="inputAlign"
        label=""
        readonly
        v-if="insuData.pullMoneyMethodList"
      >
        <template #label>
          <div class="lh_1-2">养老年金<br />领取方式</div>
        </template>
        <template #input>
          <MsRadios
            :curVal="insuData.getMode"
            :arrList="insuData.pullMoneyMethodList"
            type="getMode"
            @change="change1Radio"
            v-if="insuData.pullMoneyMethodList.length > 1"
          />
          <div class="txt_check thin-border" v-else>
            {{ insuData.pullMoneyMethodList[0].label }}
          </div>
        </template>
      </van-field>
      <van-field
        :input-align="inputAlign"
        label=""
        readonly
        v-if="insuData.pullAgeList"
      >
        <template #label>
          <div class="lh_1-2">
            养老年金<br />
            {{ insuData.getYearFlag == "Y" ? "领取年度" : "领取年龄" }}
          </div>
        </template>
        <template #input>
          <MsRadios
            :curVal="insuData.pullAge"
            :arrList="insuData.pullAgeList"
            type="pullAge"
            @change="change1Radio"
            v-if="insuData.pullAgeList.length > 1"
          />
          <div class="txt_check thin-border" v-else>
            {{ insuData.pullAgeList[0].label }}
          </div>
        </template>
      </van-field>
      <van-field
        :input-align="inputAlign"
        label=""
        readonly
        v-if="insuData.pullMethodArr"
      >
        <template #label>
          <div class="lh_1-2">养老年金<br />领取频次</div>
        </template>
        <template #input>
          <MsRadios
            :curVal="insuData.pullMethod"
            :arrList="insuData.pullMethodArr"
            type="pullMethod"
            @change="change1Radio"
            v-if="insuData.pullMethodArr.length > 1"
          />
          <div class="txt_check thin-border" v-else>
            {{ insuData.pullMethodArr[0].label }}
          </div>
        </template>
      </van-field>
      <van-field
        :input-align="inputAlign"
        label=""
        readonly
        v-if="insuData.mustDutyDesc"
      >
        <template #label>
          <div class="lh_1-2">{{ insuData.mustDutyTitle || "基本责任" }}</div>
        </template>
        <template #input>
          <div class="text_desc" v-html="insuData.mustDutyDesc"></div>
        </template>
      </van-field>
      <!-- 保额(显示:1,规则:0)-1 -->
      <div
        class="cell3_main"
        v-if="insuData.amnt !== undefined && !insuData.blankAmnt"
      >
        <div class="cell3Item">
          <div class="cell3_label">
            基本保额
            <FieldDescMode
              label="基本保额"
              :desc="insuData.amntDesc"
              v-if="insuData.amntDesc"
            />
          </div>
          <div class="cell3_value" :class="amntLimitMsg ? 'has_warn' : ''">
            <MsRadios
              :curVal="insuData.amnt"
              :arrList="insuData.amntList"
              type="amnt"
              @change="change1Radio"
              v-if="insuData.amntType == 'arr'"
            />
            <div
              class="txt_check thin-border to_text"
              v-else-if="insuData.amntType == 'text'"
            >
              <i class="ft15">
                {{ insuData.amnt ? `${insuData.amnt}` : "--" }}
              </i>
              <i style="margin-left: 3px">元</i>
            </div>
            <div class="flex-lr infoCon amnt-f-end" v-else>
              <input
                type="number"
                class="baofei"
                v-model="insuData.amnt"
                @blur="
                  changDatas(insuData.varietyCode, 'amnt', $event.target.value)
                "
              /><i style="margin-left: 3px">元</i>
              <MsImgIcon name="edit" size="14" style="margin-left: 5px" />
            </div>
            <p class="warn_msg" v-if="amntLimitMsg">{{ amntLimitMsg }}</p>
          </div>
        </div>
      </div>
      <!-- 保费(显示:1,规则:0)-1 -->
      <div class="cell3_main" v-if="insuData.prem !== undefined">
        <div class="cell3Item">
          <div class="cell3_label">
            首年保费
            <FieldDescMode
              label="首年保费"
              :desc="insuData.premDesc"
              v-if="insuData.premDesc"
            />
          </div>
          <div class="cell3_value" :class="premLimitMsg ? 'has_warn' : ''">
            <div
              class="txt_check thin-border to_text"
              v-if="insuData.premType == 'text'"
            >
              <i class="ft15">{{ insuData.prem || "0" }}</i>
              <i style="margin-left: 3px">元</i>
            </div>
            <div class="flex-lr infoCon amnt-f-end" v-else>
              <input
                type="number"
                class="baofei"
                v-model="insuData.prem"
                @blur="
                  changDatas(insuData.varietyCode, 'prem', $event.target.value)
                "
              /><i style="margin-left: 3px">元</i>
              <MsImgIcon name="edit" size="14" style="margin-left: 5px" />
            </div>
            <p class="warn_msg" v-if="premLimitMsg">{{ premLimitMsg }}</p>
          </div>
        </div>
      </div>
      <!-- 续保 -->
      <van-field
        :input-align="inputAlign"
        label=""
        readonly
        v-if="insuData.hasOwnProperty('renewFlag')"
      >
        <template #label>
          <div class="lh_1-2">是否自动<br />申请续保</div>
        </template>
        <template #input>
          <MsRadios
            :curVal="insuData.renewFlag"
            :arrList="renewList"
            type="renewFlag"
            @change="change1Radio"
          />
        </template>
      </van-field>
      <!-- 附加保障责任-通用 -->
      <div class="cell3_main" v-if="insuData.showLiabilities">
        <div class="cell4Item">
          <div class="cell4_label">
            {{ insuData.dutyTitle || "附加保障责任(可多选)" }}
          </div>
          <div
            class="cell4_value"
            v-if="insuData.duty3List && insuData.duty3List.length > 0"
          >
            <Liability3List :insuData="insuData" />
          </div>
          <div class="cell4_value">
            <LiabilityList
              :insuData="insuData"
              v-if="insuData.dutyList && insuData.dutyList.length > 0"
            />
            <LiabilityLists2
              :insuData="insuData"
              v-if="insuData.liabilityList && insuData.liabilityList.length > 0"
            />
          </div>
        </div>
      </div>
      <!-- 固定保障责任内容展示模块-1 -->
      <div
        class="cell3_main"
        v-if="insuData.guaranteesList && insuData.guaranteesList.length > 0"
      >
        <div class="cell3Item">
          <div class="cell3_label label2">
            {{ insuData.dutyTitle || "保障责任" }}
          </div>
          <div class="cell3_value">
            <FixedTable
              :headList="insuData.headerList"
              :bodyList="insuData.guaranteesList"
            />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import FixedTable from "./FixedTable";
import LiabilityList from "./LiabilityList";
import Liability3List from "./Liability3List";
import LiabilityLists2 from "./LiabilityLists2";
import FieldDescMode from "./FieldDescMode";
export default {
  name: "InsuItem",
  components: {
    FixedTable,
    LiabilityList,
    LiabilityLists2,
    FieldDescMode,
    Liability3List,
  },
  props: {
    insuData: {
      default: () => {},
    },
  },
  data() {
    return {
      inputAlign: "right",
    };
  },
  computed: {
    ...mapGetters({
      mainInsu: "risks/mainInsu",
      renewList: "dictionary/renewList",
      effectiveDate: "infoReg/effectiveDate",
      bbrMultList: "insert/bbrMultList",
    }),
    planDescLabel() {
      let res = "";
      if (
        this.insuData.planBiggerList &&
        this.insuData.planBiggerList.length > 0
      ) {
        const cur2Obj = this.insuData.planBiggerList.find(
          (ele) => ele.value == this.insuData.planBig
        );
        if (cur2Obj && cur2Obj.label) {
          res = `${cur2Obj.label}-`;
        }
      }
      if (this.insuData.plansList && this.insuData.plansList.length > 0) {
        const curObj = this.insuData.plansList.find(
          (ele) => ele.value == this.insuData.planCode
        );
        if (curObj && curObj.label) {
          res += curObj.label;
        }
      }
      return res;
    },
    planDescCont() {
      let res = "";
      if (this.insuData.plansList && this.insuData.plansList.length > 0) {
        const curObj = this.insuData.plansList.find(
          (ele) => ele.value == this.insuData.planCode
        );
        if (curObj && curObj.content) {
          res = curObj.content;
        }
        const cur2Obj = this.insuData.plansList.find(
          (ele) => ele.mustChoose && ele.mustChoose == "1"
        );
        if (cur2Obj && cur2Obj.mandatoryConditionsKey == "bbrMaxNum") {
          const numLen = this.bbrMultList.length;
          if (numLen >= cur2Obj.mandatoryConditionsValue) {
            res += `\n${cur2Obj.label}${cur2Obj.content}`;
          }
        }
      }
      return res;
    },
    premLimitMsg() {
      let res = "";
      if (this.insuData.rules && this.insuData.ismain) {
        const obj = this.insuData.rules.find((ele) =>
          ["premLimit"].includes(ele.type)
        );
        if (obj) {
          if (obj.checkBaseMoney) {
            res += `保费为${obj.checkBaseMoney}的倍数`;
          }
          if (obj.minPrem) {
            res += res == "" ? "" : "，";
            res += `最低${this.getFmtMoney(obj.minPrem)}元`;
          }
          if (obj.maxPrem) {
            res += res == "" ? "" : "，";
            res += `最高${this.getFmtMoney(obj.maxPrem)}元`;
          }
        }
      }
      return res;
    },
    amntLimitMsg() {
      let res = "";
      if (this.insuData.rules && this.insuData.ismain) {
        const obj = this.insuData.rules.find((ele) =>
          ["amntLimit"].includes(ele.type)
        );
        if (obj) {
          if (obj.checkBaseMoney) {
            res += `保额为${obj.checkBaseMoney}的倍数`;
          }
          if (obj.minAmnt) {
            res += res == "" ? "" : "，";
            res += `最低${this.getFmtMoney(obj.minAmnt)}元`;
          }
          if (obj.maxAmnt) {
            res += res == "" ? "" : "，";
            res += `最高${this.getFmtMoney(obj.maxAmnt)}元`;
          }
        }
      }
      return res;
    },
  },
  created() {},
  mounted() {},
  methods: {
    getFmtMoney(value) {
      return value % 10000 == 0 ? value / 10000 + "万" : value;
    },
    changeChecked(insuData) {
      if (insuData.canChoose) {
        let errBy = "请尝试选择其他险种";
        if (insuData.limitedBy !== void 0) {
          if (insuData.limitedBy === "tbr") {
            errBy = "请确认投保人信息";
          } else if (insuData.limitedBy === "bbr") {
            errBy = "请确认被保险人信息";
          }
        }
        return this.$toast(`${insuData.errorTip}，${errBy}`);
      }
      this.changDatas(insuData.varietyCode, "checked", !insuData.checked);
    },
    changeStepAmnt(insuData, fieldName, type) {
      let value = insuData.amnt * 1;
      const stepValue = insuData.stepAmntSize * 1 || 1000;
      if (type == "plus") {
        value += stepValue;
      } else {
        value -= stepValue;
      }
      this.changDatas(insuData.varietyCode, fieldName, value);
    },
    changeStepPrem(insuData, fieldName, type) {
      let value = insuData.prem * 1;
      const stepValue = insuData.stepPremSize * 1 || 1000;
      if (type == "plus") {
        value += stepValue;
      } else {
        value -= stepValue;
      }
      this.changDatas(insuData.varietyCode, fieldName, value);
    },
    change1Radio(type, item) {
      this.changDatas(this.insuData.varietyCode, type, item.value);
    },
    changDatas(code, type, val) {
      // 领取频次须与主险一致
      if (
        type === "pullMethod" &&
        this.insuData.pullMethodRela === "mainSame"
      ) {
        if (this.mainInsu[0].pullMethod && this.mainInsu[0].pullMethod != val) {
          this.$toast(`${this.insuData.productName}领取频次须与主险一致。`);
          return;
        }
      }
      // 选计划1不能加附加被保人
      if (["110176", "110194"].includes(this.insuData.varietyCode)) {
        if (type === "planCode" && val === "1") {
          if (this.bbrMultList.length > 1) {
            this.$store.commit("common/SET_FIELD_MEAN_CONT", {
              label: `规则校验`,
              desc: `${this.insuData.productName}：添加附加被保人，不能选计划1。`,
            });
            return;
          }
        }
      }

      // console.log(val);
      this.$store.dispatch("risks/setRisks", {
        varietyCode: code,
        type: type,
        val: val,
      });
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="less" scoped>
.insuPlan {
  background-color: #fff;

  &:not(:first-child) {
    border-top: 1px solid #f6f6f6;
  }

  .cellItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    min-height: 40px;
  }

  .insuName {
    font-size: 16px;
    flex: 1;
    position: relative;
    display: flex;
    line-height: 1.3;
    padding-right: 20px;

    .zhu-icon,
    .fu-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      font-size: 12px;
      line-height: 1;
      color: #ffffff;
      border-radius: 0px 4px 4px 4px;
      margin-right: 4px;
    }

    .zhu-icon {
      background: rgba(245, 64, 64, 1);
    }

    .fu-icon {
      background: rgba(255, 141, 26, 1);

      &.disabled {
        background: rgba(166, 166, 166, 1);
      }
    }
  }

  .checkBox {
    flex-shrink: 0;
  }
  .baofei {
    color: #000;
    border: none;
    text-align: right;
  }
}

.infoCon {
  min-height: 30px;
  line-height: 30px;
  padding: 0 0 0 10px;
  position: relative;
}
.sb_tips {
  color: #b1b5b9;
  font-size: 12px;
  padding-top: 5px;
}
.warn_msg {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: #b1b5b9;
  padding: 3px 0 0 0;
  text-align: right;
}
.warn2_msg {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: #f8ad00;
  padding: 3px 0 0 0;
  white-space: pre-line;
}
.cell3_main {
  padding: 0 12px;
}
.cell3Item {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  min-height: 40px;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #ededed;
    transform: scaleY(0.5);
  }

  .cell3_label {
    display: flex;
    align-items: center;
    width: 80px;
    line-height: 32px;
    color: #747474;
    height: fit-content;
    &.label2 {
      line-height: 1.3;
    }
  }

  .cell3_value {
    display: flex;
    justify-content: flex-end;
    width: calc(100% - 90px);
    &.has_warn {
      flex-direction: column;
      align-items: flex-end;
    }
  }
  .cell2_value {
    width: calc(100% - 90px);
  }
}
.has_warn2_msg {
  padding: 7px 0;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #ededed;
    transform: scaleY(0.5);
  }
  .cell3Item {
    padding: 0 0;
    &::after {
      display: none;
    }
  }
}
.cell4Item {
  padding: 7px 0;
  min-height: 40px;
  border-bottom: 1px solid #ededed;
  .cell4_label {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20px;
    color: #343434;
    margin-top: 5px;
  }

  .cell4_value {
    width: 100%;
  }
}
.txt_check {
  min-width: 62px;
  height: 26px;
  line-height: 26px;
  padding: 0 8px;
  color: #f54040;
  border-radius: 2px;
  text-align: center;
  background-color: #fff0f0;
  &.to_text {
    height: 32px;
    line-height: 32px;
    color: #1b1b1b;
    background: #fff;
    border: none;
    &::after {
      display: none;
    }
  }
}
.text_desc {
  color: #1b1b1b;
  text-align: right;
}

.cell3_value {
  /deep/.van-stepper__input {
    width: 90px;
    height: 32px;
    margin: 0;
    background-color: #fff;
    border-top: 1px solid #f2f3f5;
    border-bottom: 1px solid #f2f3f5;
  }
  /deep/.van-stepper__minus {
    width: 32px;
    height: 32px;
  }
  /deep/ .van-stepper__plus {
    width: 32px;
    height: 32px;
  }
}
</style>
